<template>
	<view>
		<swiper class="swiper" circular indicator-dots autoplay :interval="3000"
				:duration="400" >
			<swiper-item v-for="(item ,index) in swiperList" :key="item.goods_id">
				<navigator :url="`/pages_sub1/product-detail/product-detail?pid=${item.goods_id}`" class="swiper-item">
					<image :src="item.image_src" mode=""></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 分类导航区域 -->
		<view class="nav-list">
		  <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="navClickHandler(item)">
		    <image :src="item.image_src"  class="nav-img"></image>
		  </view>
		</view>
		<!-- 楼层区域 -->
		<view class="floor-list">
		  <!-- 楼层 item 项 -->
		  <view class="floor-item" v-for="(item, index) in floorList" :key="index">
		    <!-- 楼层标题 -->
		    <image :src="item.floor_title.image_src" class="floor-title"></image>
				<view class="floor-img-box">
				  <!-- 左侧 1 个大图 -->
				  <view class="left-img-box">
				    <image :src="item.product_list[0].image_src"
				           :style="{ width: item.product_list[0].image_width + 'rpx' }"
				           mode="widthFix" @click="goToProductList(item.product_list[0])" ></image>
				  </view>
				  <!-- 右侧 4 个小图 -->
				  <view class="right-img-box">
				    <block v-for="(product, idx) in item.product_list" :key="idx">
				      <view class="right-img-item" v-if="idx !== 0">
				        <image :src="product.image_src"
				               :style="{ width: product.image_width + 'rpx' }"
				               mode="widthFix" @click="goToProductList(product)"></image>
				      </view>
				    </block>
				  </view>
				  
				</view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				navList: [],
				floorList: [] //楼层的数据列表
			}
		},
		created(){
			this.getSwiperList();
			this.getNavList();
			this.getFloorList();
		},
		methods: {
			async getSwiperList() {
				const {message,meta} = await this.$http.get('/home/swiperdata');
				console.log(message,meta);
				if(meta.status !== 200) return this.$msg('请求错误');
				this.swiperList = message;
			},
			async getNavList() {
				const { meta, message } = await this.$http.get("/home/catitems");
				console.log(message,meta);
				if(meta.status !== 200) return this.$msg('请求错误');
				this.navList = message;
				},
			
			async getFloorList(){
				const {message , meta} = await this.$http.get('/home/floordata')
				// 请求失败处理
				console.log(message,meta);
				if (meta.status !== 200) return this.$msg();
				this.floorList = message
			},
			navClickHandler(item) {
				if (item.name === "分类") {
					// 跳转到一个tab页需要使用switchTab方法
					uni.switchTab({
						url: "/pages/category/category",
					});
				}
			},
			goToProductList(product) {
			  console.log(product)
			  // 从后端返回字段中提取出需要的跳转参数
			  const str = product.navigator_url.split('?')[1]
			
			  uni.navigateTo({
			    url: '/pages_sub1/product-list/product-list?' + str,
			  })
			},
		}
	}
</script>

<style lang="scss">
.swiper{
	height: 340rpx;
	.swiper-item{
		height: 100%;
		image{
			height: 100%;
			width: 100%;
		}
	}
}
.nav-list {
  display: flex;
  justify-content: space-around;
  margin: 30rpx 0;

  .nav-img {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor-title {
  display: flex;
  width: 100%;
  height: 60rpx;
}
.right-img-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.floor-img-box {
  display: flex;
  padding-left: 10rpx;
}
</style>
